'use strict';

var React = require('react/addons');
var Router = require('react-router'); 
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var SelectComponent = React.createClass({
      getInitialState : function(){
            return {
                  isShowSelectView : false,
                  defaultSelectTxt : '未分组'
                };
      },
      handleToggle : function(){
            var off = ! this.state.isShowSelectView;
            this.setState({ isShowSelectView :  off });
      },
      handleSelect: function(selectName){
            this.setState({ defaultSelectTxt : selectName});
            this.setState({ isShowSelectView : false });
      },
      handleGroupManager : function(){
        this.setState({ isShowSelectView : false });    
      },
      render: function() {
            var SelectDropdownMenu = 
            this.state.isShowSelectView ? 
                  <div className="do-dropdown-select-box">
                        <ul className="do-dropdown-select-menu">
                          <li>
                            <a href="javascript:;" onClick={ this.handleSelect.bind(this,'随诊1') }>
                               随诊1
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;" onClick={ this.handleSelect.bind(this,'随诊2') }>
                               随诊2
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;" onClick={ this.handleSelect.bind(this,'随诊3') }>
                               随诊3
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;" onClick={ this.handleSelect.bind(this,'随诊4') }>
                               随诊4
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;" onClick={ this.handleSelect.bind(this,'随诊5') }>
                               随诊5
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;" onClick={ this.handleSelect.bind(this,'随诊6') }>
                               随诊6
                            </a>
                          </li>
                          <li>
                            <a href="javascript:;" onClick={ this.handleSelect.bind(this,'随诊7') }>
                               随诊7
                            </a>
                          </li>
                        </ul>
                        <a href="javascript:;" onClick={ this.handleGroupManager } className="do-dropdown-add">分组管理</a>
                  </div>
                   : [];

            return (
                  <div>
                        <a href="javascript:;" onClick={ this.handleToggle }>{ this.state.defaultSelectTxt } <i className="fa fa-sort-down do-sort-down"></i></a>
                        <ReactCSSTransitionGroup transitionName="do-fade">
                        { SelectDropdownMenu }
                        </ReactCSSTransitionGroup>
                  </div>
            );
   }
});

module.exports = SelectComponent;